import React, { Component } from "react"
import { connect } from 'react-redux'
import Template from "components/UI/template"
import { Tabs } from 'antd'
import Condition from "components/condition"
import DetailView from "./detail-view"
import BankBatchDownload from "./bank-batch-download"

const { Header, Middle } = Template;
const { TabPane } = Tabs;
const { If } = Condition;

@connect(mapStateToProps)
class BankAccountDetail extends Component {

  state = {
    status: (this.props.currentPageRoute.subFunctions.find(item => item.operationType !== 'H') || {}).key
            || 'bankaccount-record-detail'
  };

  render() {
    const { status } = this.state;
    const { subFunctions } = this.props.currentPageRoute;
    return (
      <Template>
        <Header>
          <Tabs activeKey={status} onChange={key => { this.setState({ status: key })}}>
            {
              subFunctions.map(item => item.operationType !== 'H' && <TabPane tab={item.resourceName} key={item.key}/>)
            }
          </Tabs>
        </Header>
        <Middle>
          <If value={status === 'bankaccount-record-detail'}>
            <DetailView
              tabChange={key => { this.setState({ status: key })}}
              disabled={(subFunctions.find(item => item.key === 'bankaccount-record-detail') || {}).operationType === 'R'}
            />
          </If>
          <If value={status === 'bankreceipt-batch-download'}>
            <BankBatchDownload  tabKey={status}/>
          </If>
        </Middle>
      </Template>
    )
  }

}

function mapStateToProps(state) {
  return {
    currentPageRoute: state.main.currentPageRoute
  }
}

export default BankAccountDetail
